<template>
  <div class="userManage">
    <div class="searchBlock">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.user" :placeholder="$t('table.phone')" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.user" :placeholder="$t('table.user')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{ $t('table.search') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="downloadLoading" @click="handleDownload">{{ $t('table.export') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBlock">
      <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column prop="date" label="用户ID" width="180" />
        <el-table-column prop="date" label="创建日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">{{ $t('table.edit') }}</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">{{ $t('table.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :total="1000" />
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'

export default {
  name: 'UserManage',
  components: {},
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      downloadLoading: false
    }
  },
  computed: {},
  created() {},
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleEdit(index, row) {
      console.log(index, row)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['date', 'name', 'address']
        const filterVal = ['date', 'name', 'address']
        const data = this.formatJson(filterVal, this.tableData)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    }
  }
}
</script>
<style>
.searchBlock {
  width: 96%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 8rem;
  margin-left: 2%;
}
.tableBlock {
  width: 96%;
  margin-left: 2%;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.pagination{
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10rem;
}
</style>

